<script lang="ts" setup>
import { getCurrentInstance, ref, inject, watch } from 'vue'
import { onLoad, onPageScroll, onReady, onShow } from '@dcloudio/uni-app'
import { useScrollUpdownBottomContent } from '@/hooks'
import TnPopup from '@tuniao/tnui-vue3-uniapp/components/popup/src/popup.vue'
import { useSubPage } from './composables'
import { tnNavPage } from '@tuniao/tnui-vue3-uniapp/utils'
import { privacyPopup } from '@/components/privacyPopup'
import { useUserStore } from '@/stores'
import { getGradesApi, getPlanInfoAPi } from '@/services/api'
import boolean from '@tuniao/tnui-vue3-uniapp/libs/async-validator/validator/boolean'
import TnLineProgress from '@tuniao/tnui-vue3-uniapp/components/line-progress/src/line-progress.vue'
import { notActiveBar } from '@/components/not-active-bar'

const subsectionValue = ref(0)
const scenseType = ref(2)
const needDay = ref(0)
const planDetail = ref({} as any)
const notActiveBar = ref(null)
const userStore = useUserStore()
const ifBindBook = ref(false)
const toSetPlan = () => {
  if (ifBindBook.value) {
    uni.navigateTo({
      url: `/home-page/readSetting/index?data=${encodeURIComponent(JSON.stringify(planDetail.value))}&ifFinish=${0}`,
    })
  } else {
    uni.showToast({ title: '请先绑定教材', icon: 'none' })
  }
}
const toListenPage = () => {
  console.log('9899')
  if (planDetail.value.planId) {
    //已经完成该书的计划，清楚计划重新制定
    if (planDetail.value.hadLearnSum == planDetail.value.lessonSum) {
      uni.showModal({
        title: '已学完',
        content: `恭喜您已完成《${planDetail.value.title}》的${subsectionValue.value == 0 ? '单词' : subsectionValue.value == 1 ? '句子' : subsectionValue.value == 2 ? '课文' : ''}巩固练习 !`,
        confirmText: '重新制定',
        cancelText: '知道了',
        success: function (res) {
          if (res.confirm) {
            console.log('制定计划重新学')
            uni.navigateTo({
              url: `/home-page/readSetting/index?data=${encodeURIComponent(JSON.stringify(planDetail.value))}&ifFinish=${1}`,
            })
          } else if (res.cancel) {
            console.log('知道了')
          }
        },
      })
    } else {
      uni.navigateTo({
        url: `/pages/typeStudy/en-answer?learnType=${subsectionValue.value + 1}&scenseType=${scenseType.value}&planId=${planDetail.value.planId}`,
      })
    }
  } else {
    uni.showModal({
      title: '制定计划',
      content: `请前往制定${subsectionValue.value == 0 ? '单词' : subsectionValue.value == 1 ? '句子' : subsectionValue.value == 2 ? '课文' : ''}的听读计划`,
      confirmText: '前往制定',
      cancelText: '暂不制定',
      success: function (res) {
        if (res.confirm) {
          console.log('制定计划重新学')
          uni.navigateTo({
            url: `/home-page/readSetting/index?data=${encodeURIComponent(JSON.stringify(planDetail.value))}&ifFinish=${0}`,
          })
        } else if (res.cancel) {
          console.log('知道了')
        }
      },
    })
  }
}
const tapChange = async (index) => {
  if (ifBindBook.value) {
    await getPlan()
    if (planDetail.value.planPerDayNum != 0) {
      needDay.value = Math.ceil(
        (planDetail.value.lessonSum - planDetail.value.hadLearnSum) /
          planDetail.value.planPerDayNum
      )
    } else {
      needDay.value = 0
    }
  } else {
    uni.showToast({ title: '请先绑定教材', icon: 'none' })
  }
}
const getPlan = async () => {
  const params = {
    bookId: userStore.getBookId,
    learnType: subsectionValue.value + 1,
    scenseType: scenseType.value,
  }
  const data = await getPlanInfoAPi(params)
  if (data.code === 200) {
    planDetail.value = data.data
    planDetail.value.learnType = subsectionValue.value + 1
    planDetail.value.scenseType = scenseType.value
    console.log(planDetail.value)
  }
}
onShow(async () => {
  if (notActiveBar.value) {
    notActiveBar.value.show()
  }
  if (userStore.getBookId !== '') {
    ifBindBook.value = true
    await getPlan()
    if (planDetail.value.planPerDayNum != 0) {
      needDay.value = Math.ceil(
        (planDetail.value.lessonSum - planDetail.value.hadLearnSum) /
          planDetail.value.planPerDayNum
      )
    } else {
      needDay.value = 0
    }
  } else {
    ifBindBook.value = false
  }
})
const fresh = async () => {
  console.log('freshfreshfreshfresh')
  if (notActiveBar.value) {
    notActiveBar.value.show()
  }
  if (userStore.getBookId !== '') {
    ifBindBook.value = true
    await getPlan()
    if (planDetail.value.planPerDayNum != 0) {
      needDay.value = Math.ceil(
        (planDetail.value.lessonSum - planDetail.value.hadLearnSum) /
          planDetail.value.planPerDayNum
      )
    } else {
      needDay.value = 0
    }
  } else {
    ifBindBook.value = false
  }
}
</script>

<template>
  <view class="contain">
    <view class="main">
      <TnSubsection
        v-model="subsectionValue"
        active-color="#5155E6"
        @change="tapChange"
      >
        <TnSubsectionItem title="单词" />
        <TnSubsectionItem title="句子" />
        <TnSubsectionItem title="课文" />
      </TnSubsection>
      <view class="main_box">
        <view class="main_box_list">
          <view class="bookStyleBox">
            <view class="bookImg">
              <image :src="planDetail.bookUrl" v-if="ifBindBook" />
              <image v-else src="../../../static/images/n1.png" />
            </view>
            <view class="right_box">
              <view class="title_Line">
                <view class="title">
                  {{ ifBindBook ? planDetail.title : '请先绑定教材' }}
                </view>
                <view class="changeBox" @tap="toSetPlan">
                  <text class=""> 修改 </text>
                  <TnIcon name="right" />
                </view>
              </view>
              <view class="progress">
                <TnLineProgress
                  :percent="
                    (planDetail.hadLearnSum / planDetail.lessonSum) * 100
                  "
                  active-color="#3388FF"
                  height="10"
                />
              </view>
              <view class="text_number">
                {{
                  ifBindBook
                    ? planDetail.hadLearnSum + '/' + planDetail.lessonSum
                    : '0/0'
                }}
              </view>
            </view>
          </view>
          <view class="tip_text"> 今日计划 </view>
          <view class="type_box_line">
            <view class="type_box">
              <view class="text"> 已学 </view>
              <view class="number_box">
                <text class="left_text">
                  {{ ifBindBook ? planDetail.todayHadLearnSum : 0 }}
                </text>
                <text class="right_text">
                  /{{ ifBindBook ? planDetail.planPerDayNum : 0 }}个
                </text>
              </view>
            </view>
            <view class="day_box">
              <view class="text"> 剩余天数 </view>
              <view class="number_box">
                <text class="left_text"> {{ ifBindBook ? needDay : 0 }} </text>
                <text class="right_text"> 天 </text>
              </view>
            </view>
          </view>
        </view>

        <TnButton
          class="btn"
          bg-color="rgba(81, 85, 230, 0.4)"
          text-color="#fff"
          width="100%"
          height="100rpx"
          font-size="32rpx"
          v-if="
            ifBindBook &&
            planDetail.todayHadLearnSum == planDetail.planPerDayNum &&
            planDetail.planPerDayNum !== 0
          "
          >今日计划已完成，明天再来！</TnButton
        >
        <view v-else>
          <TnButton
            class="btn"
            bg-color="#5155E6"
            text-color="#fff"
            width="100%"
            height="100rpx"
            font-size="40rpx"
            @tap="toListenPage"
            v-if="ifBindBook"
            >{{
              planDetail.todayHadLearnSum > 0 ? '继续学习' : '开始学习'
            }}</TnButton
          >
        </view>
      </view>
    </view>
  </view>
  <!-- <xmToast
    show="true"
    showBtnType="2"
    cancelText="重新对话"
    submitText="返回目录"
    title="学习完成"
    content="恭喜你完成了本话题的达人对话练习！"
  ></xmToast> -->
  <notActiveBar ref="notActiveBar" height="0" @fresh="fresh" />
  <!-- 隐私授权框 -->
  <privacyPopup></privacyPopup>
</template>

<style lang="scss" scoped>
.contain {
  width: 100%;
  .top_banner {
    width: 100%;
    image {
      width: 100%;
    }
  }
  .main {
    padding: 20rpx 32rpx;
  }
  .main_box {
    width: 100%;
    .main_box_list {
      width: 100%;
      background: #fff;
      border-radius: 20rpx;
      padding: 32rpx 32rpx 60rpx;
      margin-top: 32rpx;
      margin-bottom: 50rpx;
      .bookStyleBox {
        width: 100%;
        display: flex;
        padding-bottom: 32rpx;
        border-bottom: 2rpx solid #bbbbbb;
        .bookImg {
          width: 120rpx;
          height: 180rpx;
          object-fit: contain;
          margin-right: 20rpx;
        }
        .right_box {
          flex: 1;
          .title_Line {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .title {
              font-size: 28rpx;
              color: #101010;
              font-weight: bold;
            }
            .changeBox {
              color: #6c6c6c;
              font-size: 26rpx;
            }
          }
          .progress {
            margin: 38rpx 0;
          }
          .text_number {
            color: #6c6c6c;
            font-size: 26rpx;
          }
        }
      }
      .tip_text {
        height: 90rpx;
        line-height: 90rpx;
        color: #101010;
        font-size: 32rpx;
        font-weight: bold;
      }
      .type_box_line {
        display: flex;
        justify-content: space-between;
        padding: 0 10rpx;
        .type_box {
          width: 50%;
          padding-left: 20rpx;
          .text {
            color: #101010;
            font-size: 28rpx;
            font-weight: bold;
            margin: 10rpx 0 16rpx;
          }
          .number_box {
            .left_text {
              color: #101010;
              font-size: 80rpx;
              font-weight: bold;
              font-style: oblique;
            }
            .right_text {
              color: #6c6c6c;
              font-size: 40rpx;
            }
          }
        }
        .day_box {
          width: 50%;
          display: flex;
          flex-direction: column;
          align-items: center;
          .text {
            color: #101010;
            font-size: 28rpx;
            font-weight: bold;
            margin: 10rpx 0 16rpx;
          }
          .number_box {
            .left_text {
              color: #101010;
              font-size: 80rpx;
              font-weight: bold;
              font-style: oblique;
            }
            .right_text {
              color: #6c6c6c;
              font-size: 40rpx;
            }
          }
        }
      }
    }
  }
}
</style>
